@import "utils";
@import "base";
$cecolor:#fe7537;
*{ margin: 0; padding: 0; box-sizing: border-box;}
::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
}
.text-cell{
	overflow: hidden !important;
	text-overflow:ellipsis !important;
	white-space: nowrap !important;
}
.linear{
	 /*! autoprefixer: off */
	background: -webkit-linear-gradient(left, #fd9d62, #fb4c53);
	/* autoprefixer: on */
	background: linear-gradient(left, #fd9d62, #fb4c53);
}
.van-stepper__plus, .van-stepper__minus{border: 0px !important;}
.van-stepper__plus::before{}
.van-stepper__plus::before{}
.van-pull-refresh{ min-height: 100% !important;}
input{font-size: 0.28rem; border: 0; outline: none;background: transparent;}
.head{ width: 100%; height: $headH; border-bottom: 1px solid #e7e7e7;}
a{ text-decoration: none;}
ul li{ list-style-type: none}
img{ max-width: 100%; display: block;}
html,body,#app{ width: 100%; height: 100%; font-family: Arial, Helvetica, sans-serif; background: #fff; color: #333;}
#app>div{height: 100%; width: 100%;}
h1,h2,h3,h4,h5,h6{ font-weight: 400}
.head{
	width: 100%; text-align: center; font-size: 0.32rem; position: fixed; left: 0; top: 0; z-index: 99; border-bottom: 1px solid #e7e7e7;
	.back{width: 0.86rem; text-align: center; font-size: 0.32rem; white-space:nowrap;}
	i{ font-size: 0.32rem !important; display: block;}
	h2{ font-size: 0.34rem;}
}
.header{
	width: 100%; height: 0.92rem; @extend .linear; position: fixed; left: 0; top: 0; color: #fff;z-index: 100;
	.back{width: 0.86rem; text-align: center; font-size: 0.32rem;}
	i{ font-size: 0.32rem !important; display: block;}
	h2{ font-size: 0.34rem;}
}
.van-list__finished-text{ clear: both;}
.flex{
	display: flex; display: -webkit-flex;
	&.a-center{align-items: center}
	&.j-center{justify-content: center}
	&.jlr{justify-content:space-between;}
	&.col{ flex-direction: column;}
	&.wrap{ flex-wrap: wrap;}
}
.abox{
	/*box-sizing: content-box; padding-top: $headH; height: calc(100% - #{$headH});*/ overflow: auto; width: 100%; position: fixed; top: 0; bottom: 0; padding-top:$headH;  z-index: 1;
}
.yellow{ background: #fffaf8;}
.swiperTop{
	width: 100%; height: 0.86rem; background: #fff;
}
.van-area{
	box-sizing: content-box; padding-bottom: 1.6rem; position: relative;
	.van-picker__toolbar{
		position: absolute; bottom: 0px; height: 1.6rem; width: 100%; display: flex; display: -webkit-flex; align-items: center; justify-content: center;
		.van-picker__cancel,.van-picker__confirm{width: 2.6rem; height: 0.76rem; line-height: 0.76rem; font-size: 0.36rem; margin: 0px 5px; background: #ff7238; text-align: center; color: #fff; border-radius: 5px;}
		.van-picker__cancel{ background: #fffaf8; color: #c1c4c9;}
	}
}
.checkbox{
	color: $cecolor; font-size: 0.28rem; padding: 0.2rem 0px;
	.van-icon{ color: #fff !important;}
}
.login{
	padding-top: 1.2rem;
	.portrait{ width: 1.74rem; height: 1.74rem; margin:auto; background: url('../img/i-login.png') no-repeat; background-size: 100% 100%;}
	.loginbox{
		width: 6rem;  padding-top: 0.8rem; margin: auto;
		.loginItem{
			width: 100%; height: 1.07rem; margin-top: 0.4rem; border: 1px solid #e7e7e7; border-radius: 5px; padding: 0px 0.2rem;
		}
		.logingroup{
			width: 100%; height: 1.07rem; margin-top: 0.4rem; border-radius: 5px;
			button{
				width: 38%; background: none; border-radius: 5px; height:1.07rem; border: 1px solid $cecolor; font-size: 0.27rem; color: $cecolor; text-align: center; border: 1px solid $cecolor;
				&[disabled]{ border: 1px solid #ddd !important; color: #ddd !important;}
			}
		}
		.icon-close{
			background: #fb4f54; width: 0.4rem; height: 0.4rem; border-radius: 50%; color: #fff; text-align: center; line-height: 0.4rem;
			&::before{ content:'\2715'; color: #fff; font-size: 0.2rem; height: 0.4rem; line-height: 0.42rem; display: block;}
		}

		input{flex: 1; color: #999;}
		i{ color: #999;}
		.forget{ font-size: 0.2rem; padding: 0.25rem 0px; color: $cecolor;}
		.regbtn{line-height: 0.98rem; width: 100%; text-align: center; font-size: 0.32rem; color: $cecolor; margin-top: 0.1rem;}
	}
}

.blockbtn{width: 6rem; background: $cecolor; height: 0.98rem; border-radius: 5px; line-height: 0.98rem; text-align: center; color: #fff; font-size: 0.32rem; margin: auto;}
.product{overflow: hidden;
	li{
		width: 3.44rem; height: 4.78rem; background: #fff; margin-left: 0.2rem; margin-top: 0.2rem; float: left;
		.productImage{ width: 100%; height: 2.84rem; img{ width: 100%; height: 100%} }
		.productInfo{
			flex: 1; padding: 0.2rem 0.3rem;
			display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden; font-size: 0.27rem;
			b{ background: $cecolor; color: #fff; padding: 2px 0.12rem; border-radius: 10px; margin-right: 5px;}
			.title{ overflow: hidden; line-height: 1.8;}
			.ce{
				color: $cecolor;
				h4 span{ font-size: 0.36rem;}
				i{ font-size: 0.4rem;}
			}
		}
	}
}
.cengs{ font-size: 0.28rem; color: $cecolor;}
.product1{
	height: 100%;
	li{ padding: 0.2rem;}
	.productImage{ width: 2.09rem; height: 2.09rem; overflow: hidden; border-radius: 10px;  img{ width: 100%; height: 100%} }
	.productInfo{
		flex: 1; padding-left: 0.36rem; height: 2.09rem;
		.title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden; font-size: 0.27rem; line-height: 1.8; color: #666;}
		.viewprice{
			font-size: 0.16rem; color: #999;   del{ margin-left: 10px;}
			h2{ color: $cecolor;  span{ font-size: 0.3rem;} }
		}
		.buybox{border: 1px solid $cecolor; padding: 5px 10px; border-radius: 5px 0px 0px 5px; color: #666; font-size: 0.27rem; width: 40%;}
	}
}
	.protitle{
		width: 100%; background: #fff; padding: 0.5rem 0.28rem;
		.proImage{ width: 1.8rem; height: 1.8rem; img{ width: 100%; height: 100%} }
		.info{
			background: #f7f8f8; height: 1.8rem; padding: 0.15rem; flex: 1;
			.top{
				width: 100%;
				h2{ display: block; color: #2e2e2e; font-size: 0.28rem;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden}
				h4{ color: #999; font-size:0.22rem; padding: 0.1rem 0px;}
        .color{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden}
			}
			h3{ color: $cecolor; font-size: 0.24rem;}
		}
	}
.commit{

	.commitlist{ margin-top: 0.16rem;
		li{
			padding: 0.5rem 0.3rem 0.3rem 0.3rem; background: #fff; margin-bottom: 1px;
			.title{
				.commitx{ width: 0.56rem; height: 0.56rem; border-radius: 50%; margin-right: 0.22rem;}
				h4{ font-size: 0.28rem;}
				.van-rate{ line-height: 0;}
			}
			.committext{ font-size: 0.3rem; color: #2e2e2e; padding: 0.2rem 0px;}
			.commitImage{
        overflow: hidden;
				.item{width: 1.5rem; height: 1.5rem; margin-right: 0.3rem; margin-bottom: 0.2rem; img{ width: 100%; height: 100%};float: left  }
			}
		}
	}
}
.order{
	padding-bottom: 0.95rem;
	.orderTitle{
		width: 100%; background: url('../img/orderbor.png') repeat-x left bottom #fff; padding: 0.3rem;
		h2{ font-size: 0.34rem;  color: #2e2e2e; span{ margin-left: 0.2rem;}}
		.address{
			color: #666; font-size: 0.24rem; padding: 0.2rem 0px;  span{ padding: 3px 10px; margin-right: 10px; color: #fff; border-radius: 15px; @extend .linear }
		}
		i{ font-size: 0.45rem; color: #2e2e2e;}
	}
	.orderpro{
		background: #fff; padding: 0.3rem;
		.img{ width: 1.9rem; height: 1.9rem; img{ width: 100%; height: 100%;}}
		.info{
			flex: 1; padding:0.1rem 0px 0.1rem 0.4rem; max-width: 70%;
			h2{ font-size: 0.28rem; color: #2e2e2e;}
			.params{ color: #999; font-size: 0.22rem; padding: 0.1rem 0px 0.2rem 0px;}
			.price{ color: $cecolor; font-size: 0.24rem;}
			.buy_nums{ font-size: 0.24rem; color: #2e2e2e}
		}
	}
	.ordergroup{
		margin-top: 0.16rem;
		.item{
			background: #fff; padding:0.3rem 0.1rem 0.3rem 0.3rem; margin-bottom: 1px;
			h4{ color: #666666; font-size: 0.24rem;}
			.tip{ color: #999; font-size: 0.2rem;}
			.rightgroup{
				span{
					font-size: 0.26rem; color: #2e2e2e; margin-right: 0.1rem;
					&.ce{ color: $cecolor !important;}
				}
				i{ font-size: 0.26rem; color: #2e2e2e; width: 0.26rem;}
			}
		}
	}
	.textareabox{
		padding: 0.3rem; background: #fff;
		textarea{ width: 100%; height: 3rem; background: #fffaf8; border: 0; color: #999; font-size: 0.24rem; padding: 0.2rem;}
		h4{ font-size: 0.24rem; color: #999;  padding-bottom: 10px;}
		.plabox{
			background: #fffaf8; margin-bottom: 0.2rem;
			.itemgroup{
				padding: 0.3rem; font-size: 0.34rem;
				img{ width: 0.4rem; margin-right:0.2rem;}
			}
		}
	}
}
.van-stepper__plus,.van-stepper__minus{ background: none; border-radius: 50%; border: 1px solid #dadada;}
.van-stepper__input{ background: none;}
.orderFixed{
	width: 100%; height: 0.95rem; background: #fff; position: fixed; left: 0; bottom: 0;
	.fx1{
		flex: 1; padding-left:0.3rem; color: #2e2e2e; font-size: 0.28rem; height: 70%;
		h4{ color: #fb4f54; font-size: 0.22rem;  b{ font-size: 0.32rem;} }
	}
	.play{ background: #fb4c53; font-size: 0.34rem; width: 2.4rem; color: #fff; text-align: center; line-height: 0.95rem;}
	.btnfx1{ flex: 1; line-height: 0.95rem; text-align: center; color: #fff; background: $cecolor; font-size: 0.34rem;}
	.btnfx2{ flex: 1; line-height: 0.95rem; text-align: center; color: #fff; background: #fb4f54; font-size: 0.34rem;}
}
.ordermsg{
	padding:0.3rem 0.25rem;
	.msgbox{ background: #fff; padding: 0.25rem 0.6rem;}
	.title{ width: 100%; text-align: center; color: #999; font-size: 0.22rem;}
	.tagbox{
		overflow: hidden;
		.item{
			width: 1.52rem; float: left; text-align: center; line-height: 0.52rem; font-size: 0.24rem; color: #c1c4c9; height: 0.54rem; border: 1px solid #fdeedb; border-radius: 3px; margin-right: 0.6rem; margin-bottom:0.3rem;
			&:nth-child(3n+3) {margin-right:0px !important; }
			&.on{ background: #fffaf8; color: $cecolor;}
		}
	}

	button{
		width: 100%; margin-top: 1rem; height: 0.76rem; font-size: 0.34rem; border-radius: 5px; line-height: 0.76rem; text-align: center; color: #fff; background: #fb4f54; border: 0;
		&[disabled]{background: #c1c4c9 !important;}
	}
}
.context{
	padding: 0.12rem 0.2rem 0.3rem 0.2rem; min-height: 3.2rem; border: 1px solid #c1c4c9; border-radius: 5px;
	textarea{ display: block; border: 0; color: #2e2e2e; font-size: 0.24rem; min-height: 1.5rem; width: 100%;}
	.imggroup{
		width: 100%;
		.item{
			width: 1.3rem; height: 1.3rem; position: relative; margin-right: 0.25rem; float: left;
			.remove{
				&::before{ content: '\2715'; display: block; width: 40px; font-size: 20px; height: 40px; border-radius: 50%; background: #999; color: #fff; text-align: center; line-height: 40px; position: absolute; right: -15px; top: -15px;}
			}
			&:nth-child(4n+4) {margin-right:0px !important;}
			&.bg{
				background: url('../img/msgitem.png') no-repeat; background-size: 100% 100%;
				&::before{content: '\2715'; display: none !important;}
			}
			img{ width: 100%; height: 100%;}
			span{
				font-size: 0.22rem; color: #c1c4c9; display: block; text-align: center; padding-top: 68%; position: relative;
				input{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; opacity: 0;}
			}
		}
	}
}
.addressItem{
	background: #fff; padding: 0.3rem 0px 0.3rem 0.3rem; margin-bottom: 0.2rem;
	.fx1{
		flex: 1;
		.title{ width: 100%;  h3{font-size: 0.28rem; color: #2e2e2e;} span{ color: #999; font-size: 0.24rem; margin-left: 0.2rem;} }
		.addressmsg{ font-size: 0.26rem; line-height: 1.8; padding-top: 0.2rem; color: #2e2e2e;
			b{background: #fffaf8; border: 1px solid #fdeedb; color: $cecolor; font-weight: 400; padding: 3px 5px; border-radius: 5px;}
		}
	}
	.edit{ width: 1.2rem; text-align: center; font-size: 0.28rem; color: #c5c8cd; border-left: 1px solid #e9e9e9; height: 0.6rem; line-height: 0.6rem;}

}
	.van-swipe-cell__right{
		width: 70px; background: #fff;
		span{ display: block; width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center;}
		.removeBtn{width: 80%; font-size: 0.28rem; padding: 0.2rem 0px; border-radius: 5px; background: #fb4f54; color: #fff; text-align: center;}
	}
.addeditGroup{
	padding: 0px 0.5rem; background: #fff;
	.item{
		width: 100%; height: 0.85rem; height: 0.85rem; border-bottom: 1px solid #fffaf8;
		h4{ font-size: 0.28rem; color: #5e636d; width: 1.5rem;}
		input{ flex: 1; padding: 0px 0.2rem;}
		.fx1{
			flex: 1; padding: 0px 0.2rem; color: #999; font-size: 0.28rem;
			span{ i{ margin-right: 5px;} }
		}
	}
}
.protop{
	width: 100%; height: 2.6rem; @extend .linear; padding: 0.25rem; padding-bottom: 0;
	.procont{
		padding: 0.4rem 0.5rem 0.2rem 0.5rem; background: #fff; border-radius: 10px 10px 0px 0px; min-height: 100%;
		.img{ width: 1.8rem; height: 1.8rem; img{ width: 100%; height: 100%} }
		.info{
			flex: 1; height: 1.8rem; padding: 0.1rem; padding-left: 0.2rem;
			.title{
				font-size: 0.24rem; color: #999;
				h4{ padding-bottom: 0.1rem; font-size: 0.28rem; color: #2e2e2e;}
			}
			.ce{ font-size: 0.28rem; color: $cecolor;}
		}
		.courier{
			padding: 0.2rem 0.3rem;
			.fx1{
				flex: 1; font-size: 0.28rem; line-height: 200%;
				p{ color: #5e636d;}
			}
			.icon-dianhua{ font-size: 0.45rem; color: #5e636d;}
		}
	}

	h3{ display: block; font-size: 0.28rem; padding: 0.4rem 0px;}
	.courierlist{
		li{
			width: 100%; padding-left: 0.6rem; position: relative; padding-bottom: 0.55rem;
			&::after{ content: ''; display: block; position: absolute; width: 0.42rem; height: 0.42rem; background: url('../img/courier_off.png') no-repeat; background-size: 100% 100%; left: 0; top: 0;}
			&::before{ content: ''; display: block; position: absolute; width: 1px; height: 100%; background: #c1c4c9; left: 0.21rem; top: 0;}
			&:first-child{
				&::after{ content: ''; background: url('../img/courier_on.png') no-repeat; background-size: 100% 100%; left: 0; top: 0;}
			}
			&:last-child{
				&::before{ content: ''; display: none !important;}
			}

			.info{
				h4{ font-size: 0.24rem; color: #2e2e2e; display: block; line-height: 200%;}
				span{ color: #c1c4c9; font-size:0.2rem; display: block; padding-top: 0.15rem;}
			}

		}

	}

}
.ferund{
	background: #fff; padding: 0.3rem 0px;
	h1{ font-size: 0.28rem; color: #2e2e2e; padding: 0px 0.3rem; padding-bottom: 0.13rem;}
	.ferundItem{
		width: 100%; padding: 0px 0.3rem; border-bottom: 1px solid #fffaf8; height: 0.9rem;
		h3{ font-size: 0.28rem; color: #2e2e2e;}
	}
	.ferundRight{ font-size: 0.28rem; color: #2e2e2e;}
}
.ferundInfo{
	padding-top: 0.4rem; background: #fff;
	.tip{
		padding: 0.4rem 0.3rem; background: $cecolor; color: #fff; font-size: 0.28rem;
		h2{ font-size: 0.28rem;}
		p{ font-size: 0.24rem; padding-top: 0.15rem;}
	}
	.tip1{ width: 100%; border-bottom: 1px solid #fffaf8; height: 0.9rem; line-height: 0.9rem; padding: 0px 0.3rem; font-size: 0.26rem; color: #2e2e2e;}
	.tiplist{
		padding: 0.25rem 0.3rem;
		.item{
			width: 100%; font-size: 0.22rem; color: #c1c4c9; padding: 0.1rem 0px; padding-left: 0.25rem; position: relative;
			&::before{ content: ''; display: block; position: absolute; width: 0.1rem; height: 0.1rem; background: #c1c4c9; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%);}
		}
	}
	.btngroupt{ padding-top: 0.2rem;
		.btn1{ width: 1.2rem; height: 0.43rem; line-height: 0.41rem; margin-left: 0.2rem; border-radius: 5px; border: 1px solid #c1c4c9; text-align: center; font-size: 0.22rem; color: #c5c8cd;}
	}

}
.ferundItem1{ font-size: 0.24rem; color: #c1c4c9; padding:0.1rem 0.3rem; line-height: 200%;}
.setting1{
	margin: 0.3rem 0.35rem; padding: 0px 0.15rem; background: #fff;
	.item{ width: 100%; background: #fff; height: 0.85rem;}
	h3{ color: #5e636d; font-size: 0.28rem;}
	input{ flex: 1; padding-left: 0.5rem; text-align:right; padding-right: 0.1rem;}
	.van-radio-group{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; font-size: 0.28rem;}
	.van-radio{ padding-left: 0.3rem;}
	.van-icon{ width: 0.3rem; height: 0.3rem; line-height: 0.3rem; font-size: 0.24rem; margin-top: 0.06rem;}
	.touxiang{ width: 0.7rem; height: 0.7rem; border-radius: 50%; overflow: hidden; img{ width: 100%; height: 100%;} }
	.iconfont{ font-size: 0.3rem; margin-left: 0.1rem;}
}
.about{
	font-size: 0.26rem; color: #666; padding: 0px 0.3rem; line-height: 1.7;
	h2{ font-size: 0.3rem; color: #333; padding: 0.2rem 0px;}
	.admin{
    font-size: 0.22rem; color: #999; padding-bottom: 0.2rem;

    img {
      margin: 0 auto;
      width: 100% !important;
    }
  }
}
.orderAfter{ font-size: 0.24rem; color: #999; border: 1px solid #999; padding: 5px 15px; border-radius: 15px;}
.orderState{
	background: #fff; padding:0.2rem; position: relative;
	em{ color: $cecolor; font-size: 0.26rem; font-style: normal; border: 1px solid $cecolor; padding: 5px 12px; border-radius: 15px; position: absolute; right: 5%; top: 12%;}
	.ordericon{
		width:2.45rem; height: 1.98rem; margin: 0px auto; background: url("../img/ordersuccess.png") no-repeat; background-size:100% 100%;
		&.on{background: url("../img/orderfail.png") no-repeat; background-size:100% 100%;}
	}
	h4{ color: #333; font-size: 0.28rem; text-align: center; padding-top:0.2rem;}
}
.orderGroups{
	background: #fff; margin-top: 0.2rem; padding: 0.2rem;
	.item{

		width: 100%; height: 1.1rem; border-bottom: 1px solid #e5e5e5;
		h4{ font-size: 0.28rem; font-size: #333;}
		p{ font-size: 0.26rem; color: #999}
	}
}
